<template>
    <div>
    <div class="ssy-box-heading">
        <h3 class="title">评论 <span class="badge"></span></h3>
    </div>
    
    <div class="ssy-box-body article-comments" v-cloak>
        <ul class="comments" v-if='commentsList.length'>
            <li class="comment-item" v-for='(item,index) in commentsList'>
                <div class="comment-img">
                    <img :src="item.userInfo.avatar">
                </div>
                <div class="comment-body">
                    <div class="comment-info">
                        <span class="comment-author" v-text='item.userInfo.nickname'></span>
                        <span class="comment-date">{{item.create_time | time}}</span>
                    </div>
                    <div class="comment-content ssy-detail-body" v-html='item.content'></div>
                    <div class="comment-details">
                        <span class="comment-status comment-status-pending">
                            <button class="ssy-btn ssy-btn-empty ssy-btn-xs" @click="goAnchor(item,'#anchor_comment_' + item.id + index,'input_' + item.id + index,0)">回复</button>
                        </span>
                        <ul class="comment-actions" v-if='siteGlobal.userId == item.userInfo.uid || siteGlobal.userInfo.group_id == 1'>
                            <li><button class="ssy-btn ssy-btn-empty ssy-btn-xs" @click='commentsEditModalClick(item.id)'>编辑</button></li>
                            <li><button class="ssy-btn ssy-btn-empty ssy-btn-xs"  @click='commentsDel(item.id)'>删除</button></li>
                        </ul>
                    </div>
                </div>
                <!---->
                <ul class="comments comments-list" v-if='item.commentsList.length'>
                    <li class="comment-item" v-for='(sub,subIndex) in item.commentsList'>
                        <div class="comment-img">
                            <img :src="sub.userInfo.avatar">
                        </div>
                        <div class="comment-body">
                            <div class="comment-info">
                                <span class="comment-author" v-text='sub.userInfo.nickname'></span>
                                <span v-if='sub.replyInfo'>
                                    <span>回复</span>
                                    <span class="comment-author" v-text='sub.replyInfo.userInfo.nickname'></span>
                                </span>
                                <span class="comment-date">{{sub.create_time | time}}</span>
                            </div>
                            <div class="comment-content" v-html='sub.content'></div>
                            <div class="comment-details">
                                <span class="comment-status comment-status-pending">
                                    <button class="ssy-btn ssy-btn-empty ssy-btn-xs" @click="goAnchor(item,'#anchor_comment_' + item.id + index,'input_' + item.id + index,1,sub)">回复</button>
                                </span>
                                <ul class="comment-actions" v-if='siteGlobal.userInfo.group_id == 1'>
                                    <li><button class="ssy-btn ssy-btn-empty ssy-btn-xs"  @click='subDel(sub.id)'>删除</button></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
                <!---->
                <section class="comment-reply mt-3" v-show='item.commentStatus' :id="'anchor_comment_' + item.id + index">
                    <form class="comments-form" v-cloak>
                        <div class="form-group">
                            <textarea class="form-control" :id="'input_' + item.id + index" v-model="commentsReplyContent" rows="3" focus :placeholder="placeholder"></textarea>
                        </div>
                    </form>
                    <div class="text-right">
                        <button class="btn ssy-btn-empty" @click="commentsReplyCancel(item)">取 消</button>
                        <button class="btn btn-primary" @click="commentsReplyAdd(item)">立即提交</button>
                    </div>
                </section>
            </li>
        </ul>
    </div>
    <div class="p-3" v-if='commentStatus' v-cloak>
        <form class="comments-form">
            <div class="form-group mini-editor">
                <textarea class="form-control" id="comments_editor" v-model="commentsContent" rows="3"></textarea>
            </div>
        </form>
        <div class="text-right">
            <button class="btn btn-primary" @click="commentsAdd">立即提交</button>
        </div>
    </div>
    <!--编辑的弹出框-->
    <Modal v-model="commentsModalStatus" title="编辑" width='600' v-cloak :mask-closable="false">
        <div class="form-group mini-editor">
            <textarea id='comments_edit_editor' class="form-control" v-model="commentsEditData" rows="3"></textarea>
        </div>
        <div slot="footer" class="dialog-footer">
            <i-button @click="commentsModalStatus = false">取 消</i-button>
            <i-button type="primary" @click="commentsEdit">确 定</i-button>
        </div>
    </Modal>
  </div>
</template>

<script>
    
export default {
    data () {
        return {
            itemId: siteGlobal.itemDetailId,
            commentsContent: '',
            commentStatus: true,
            commentsId: '',
            commentsEditData: '',
            commentsModalStatus: false,
            commentsList: [],
            
            commentsReplyContent: '',
            placeholder: '',
            replyItemId: '',
            isReply: 0,
            replyUid: '',
            //编辑器
            commentsEditor: '',
            commentsEditEditor: '',
            answer: {
                toolbar : ['title', 'bold', 'italic', 'underline', 'strikethrough',   'color', '|', 'ol', 'ul', 'blockquote', 'code', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
                mobileToolbar : ["bold", "underline", "strikethrough", "color", "ul", "ol"],
            },
        }
    },
    watch: {
       
    },
    mounted() {
        if (siteGlobal.userId) {
            this.getCommentsList();
            var _this = this;
            setTimeout(function() {
                _this.createEditor();
                _this.createEditEditor();
            }, 100);
        }
    },
    methods: {
       createEditor: function() {
            this.commentsEditor = new Simditor({
                textarea: document.getElementById('comments_editor'),
                toolbar: this.answer.toolbar,
                upload: {
                    url: modConfig.modUploadApi + 'defaultImgUpload',
                    params: {
                        type: modConfig.modName,
                    },
                    fileKey: 'fileDataFileName',
                    connectionCount: 3,
                    leaveConfirm: '正在上传文件'
                },
                pasteImage: true,
            });
        },
        createEditEditor: function() {
            this.commentsEditEditor = new Simditor({
                textarea: document.getElementById('comments_edit_editor'),
                toolbar: this.answer.toolbar,
                upload: {
                    url: modConfig.modUploadApi + 'defaultImgUpload',
                    params: {
                        type: modConfig.modName,
                    },
                    fileKey: 'fileDataFileName',
                    connectionCount: 3,
                    leaveConfirm: '正在上传文件'
                },
                pasteImage: true,
            });
        },
       //评论添加
        commentsAdd: function() {
            var commentsContent = this.commentsEditor.getValue();
            this.$ssy.ajax(modConfig.modCommentApi + 'itemAdd', {
                itemId: this.itemId,
                content: commentsContent,
            }).then(res => {
                if (res.code == 1) {
                    this.commentsContent = '';
                    this.commentsEditor.setValue('');
                    this.$Message.success(res.msg);
                    this.getCommentsList();
                }
            });
        },
        //评论删除
        commentsDel: function(id) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定删除么？删除后不可恢复</p>',
                onOk: () => {
                    this.$ssy.ajax(modConfig.modCommentApi + 'itemDel', {
                        itemId: this.itemId,
                        commentsId: id,
                    }).then(res => {
                        if (res.code == 1) {
                            this.$Message.success('删除成功');
                            this.getCommentsList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        //评论查询
        getCommentsList() {
            this.$ssy.ajax(modConfig.modCommentApi + 'itemList', {
                itemId: this.itemId,
                order: 'asc',
            }).then(res => {
                if (res.code == 1) {
                    var commentsList  = res.data.itemList;
                    for (var i = 0; i < commentsList.length; i++) {
                        commentsList[i].commentStatus = false;
                    }
                    this.commentsList = commentsList;
                }
            });
        },
        //评论修改（弹出修改界面） 
        commentsEditModalClick:function(id) {
            this.commentsModalStatus = true;
            this.$ssy.ajax(modConfig.modCommentApi + 'itemInfo', {
                itemId: this.itemId,
                commentsId: id,
            }).then(res => {
                if (res.code == 1) {
                    this.commentsEditEditor.setValue(res.data.content);
                    this.commentsId = id;
                }
            });
        },
        //评论修改（确认提交）
        commentsEdit: function() {
            var commentsEditData = this.commentsEditEditor.getValue();
            this.$ssy.ajax(modConfig.modCommentApi + 'itemEdit', {
                itemId: this.itemId,
                commentsId: this.commentsId,
                content: commentsEditData,
            }).then(res => {
                if (res.code == 1) {
                    this.commentsEditData = '';
                    this.commentsModalStatus = false;
                    this.$Message.success('修改成功');
                    this.getCommentsList();
                }
            });
        },
        //二层回复开始
        //取消回复
        commentsReplyCancel() {
            this.getCommentsList();
        },
        goAnchor(item,selector,textareaId,isReply,sub) {
            this.commentsReplyContent = '';
            var commentsList  = this.commentsList;
            for (var i = 0; i < commentsList.length; i++) {
                if (item.id == commentsList[i].id) {
                    commentsList[i].commentStatus = true;
                } else {
                    commentsList[i].commentStatus = false;
                }
            }
            this.commentsList = commentsList;
            var _this = this;
            setTimeout(function() {
                var anchor = _this.$el.querySelector(selector);
                var anchorHeight = _this.getElementTop(anchor);
                const sTop = document.documentElement.scrollTop || document.body.scrollTop;
                _this.scrollTop(window, sTop, anchorHeight - 300, 1000);
                document.getElementById(textareaId).focus();
            }, 100);
            
            if (isReply == 0) {
                this.placeholder = '请输入回复的内容';
                this.isReply = 0;
                this.replyUid = '';
                this.replyItemId = '';
            } else {
                this.placeholder = '回复 ' + sub.userInfo.nickname + ':';
                this.isReply = isReply;
                this.replyUid = sub.uid;
                this.replyItemId = sub.id;
            }

        },
        scrollTop(el, from = 0, to, duration = 500, endCallback) {
            if (!window.requestAnimationFrame) {
                window.requestAnimationFrame = (
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                        return window.setTimeout(callback, 1000/60);
                    }
                );
            }
            const difference = Math.abs(from - to);
            const step = Math.ceil(difference / duration * 50);
        
            function scroll(start, end, step) {
                if (start === end) {
                    endCallback && endCallback();
                    return;
                }
        
                let d = (start + step > end) ? end : start + step;
                if (start > end) {
                    d = (start - step < end) ? end : start - step;
                }
        
                if (el === window) {
                    window.scrollTo(d, d);
                } else {
                    el.scrollTop = d;
                }
                window.requestAnimationFrame(() => scroll(d, end, step));
            }
            scroll(from, to, step);
        },
        getElementTop(el) {
            var anchorTop = el.offsetTop;
            var current = el.offsetParent;
            while (current !== null) {
                anchorTop += current.offsetTop;
                current = current.offsetParent;
            }
            return anchorTop;
        },
        //提交回复内容
        commentsReplyAdd: function(item) {
            this.$ssy.ajax(modConfig.modCommentApi + 'commentsAdd', {
                itemId: item.id,
                replyItemId: this.replyItemId,
                isReply: this.isReply,
                replyUid: this.replyUid,
                content: this.commentsReplyContent,
            }).then(res => {
                if (res.code == 1) {
                    this.$Message.success(res.msg);
                    this.getCommentsList();
                }
            });
        },
        //
        subDel(id) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定删除么？删除后不可恢复</p>',
                onOk: () => {
                    this.$ssy.ajax(modConfig.modCommentApi + 'commentDel', {
                        itemId: this.itemId,
                        commentsId: id,
                    }).then(res => {
                        if (res.code == 1) {
                            this.$Message.success('删除成功');
                            this.getCommentsList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        
    }
}
</script>

